<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1.2使用插值表达式引入数据 -->
        <p>{{ message }}</p>
        <p>{{ title }}</p>
        <p>{{ content }}</p>
        <p>{{ 1 + 2 + 3}}</p>
        <p>{{39 > 831 ? '对' : '错'}}</p> -->
        <p>{{ output() }}</p>
        <p>{{ output() }}</p>
        <p>{{ output() }}</p>
        <p>{{ outputContent }}</p>
        <p>{{ outputContent }}</p>
        <p>{{ outputContent }}</p>
        
        <!-- 4.指令 -->
         <!-- 内容指令 -->
        <p v-text="title" >123</p>
        <p v-text="htmlContent">456</p>
        <p v-html="htmlContent">789</p>
        <!-- v-html可以解析标签内容，而text不行 -->

        <!-- 渲染指令 -->
         <!-- for部分 -->
        <p v-for="item in 5">这是for循环的内容</p>
        <p v-for="item in arr">这是for循环的内容:{{ item }}</p>
        <p v-for="(item,key,index) in arr">这是for循环的内容:{{ item }}{{ key }}{{ index }}</p>
        <p v-for="(item,key,index) in obj">这是for循环的内容:{{ item }}{{ key }}{{ index }}</p>
        
        <!-- if部分 -->
        <p v-if="false">这是if的标签内容</p>
        <p v-show="true">这是show的标签内容</p>
        <!-- if是销毁或生成，而show是显示或隐藏 -->

        <!-- 属性指令 -->
        <p title="标题">属性指令部分内容</p>
        <p v-bind:title="title">属性部分内容</p>
        <!-- 简写样式 -->
        <p :title="title">简写属性部分内容</p>

        <!-- 事件指令 -->
        <button v-on:click="output">这是一个按钮</button>
        <!-- 简写形式 -->
        <button @click="output">这是一个按钮</button>


        <!-- 表单指令 -->
         <!-- v-model可以实现双向绑定数据的效果 -->
        <input type="text" v-model="inputValue"> 
        <p v-text="inputValue"></p>


        <!-- 5.修饰符 -->
        <input type="text" v-model.trim="inputValue">






    </div>



    <script src="./vue.min.js"></script>
    <script>
        // let value = '内容1'
        // document.getElementById('box').textContent = value
        // value = '新内容1'
        // document.getElementById('box').textContent = value
        //此时进行内容更新还需要再次进行DOM操作

        const nv = new Vue ({
            //1.响应式数据与插值表达式
            el: '#app',
            data (){
                return{
                    message: 'Hello Vue!',
                    title: '这是标题文本',
                    content: '这是内容文本',
                    htmlContent: '这是一个<span>span</span>标签',
                    arr: ['a','b','c','d','e'],
                    obj: {a: 10,b: 20,c: 30,d: 40,e:50},
                    bool: true,
                    inputValue: '这是默认输入的内容'
                }
            },

            //1.3methods用于封装逻辑代码部分
            methods:{
                output () {
                    console.log('methods执行了')
                    return '标题为:' + this.title + ',' + '内容为:' + this.content
                }
            },


            //2.计算属性:具有缓存性
            computed:{
                outputContent () {
                    // console.log('computed执行了')
                    return '标题为:' + this.title + ',' + '内容为:' + this.content
                }
            },
            //3.侦听器
            watch:{
                title(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            }

            

        })
    </script>

</body>
</html>